<template>
  <view class="pageContent">
    <view class="headContent">
      <view class="memberType"  @click="selectHead(index)" :class="index==headIndex ? 'select' : ''" v-for="(item,index) in headList" :key="index">
        {{item.name}}<text v-if="item.allCount">({{item.allCount}})</text>
      </view>
    </view>
    <view v-if="appoList.length && isComplete">
      <view class="houseMain" v-for="(item,index) in appoList" :key="index">
        <view class="houseTil">
          <view>房屋信息</view>
          <view class="houseTilTim">{{item.time || '入住日期'}}</view>
        </view>
        <view class="houseNo">
          <view>{{item.roomInfo+'-'+item.roomName}}</view>
          <view class="houseMes">
            <view class="houseMesIt">{{item.name}}</view>
            <view class="houseMesIt">{{item.telephone}}</view>
          </view>
        </view>
        <view class="handler">
          <!-- <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">审批详情</view> -->
          <block v-if="headIndex==0">
            <block v-if="userMsg.roleId==17">
              <view class="handlerCha handlerRed" @click.stop="approvaPut(index)">撤回</view>
              <view class="handlerCha handlerGre" @click.stop="makePhone(index)">拨打电话</view>
              <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">详情</view>
            </block>
            <block v-else>
              <view class="handlerCha handlerBlu" @click.stop="appMem(index)">去审批</view>
            </block>
          </block>
          <block v-if="headIndex==1 || headIndex==2">
            <view class="handlerCha handlerBlu" @click.stop="detailMem(index,1)">审批详情</view>
          </block>
        </view>
      </view>
    </view>

    <view class="appEmp" v-if="!appoList.length && isComplete">
      <image class="appEmpIcon" :src="images +'/appEmpty.png'" mode="widthFix"></image>
      <view class="appEmpMsg">～还没有足迹～</view>
    </view>

  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      password: '',
      headList: [
          { value: 1, name: '待审批', allCount: 0},
          { value: 2, name: '已同意', allCount: 0},
          { value: 3, name: '已拒绝', allCount: 0},
      ],
      headIndex:-1,
      formData:{
        name:"",
        date:"",
        housename:"房屋1",
      },
      date: '',
      appoList:[],
      isComplete:false,
      type: '',
      userMsg: '',
    }
  },
  computed: {
    ...mapState({
      myInfo: state => state.user.myInfo
    })
  },
  onLoad(options){
    var index = options.index ? options.index : 0;
    var type = options.type ? options.type : 0;
    this.headIndex=index;
    this.type=type;

    var userMsg = wx.getStorageSync('userMsg');
    this.userMsg=userMsg;
    //17租客，16业主
    var title=userMsg.roleId==17 ? '我的申请' : '由我审批'
    wx.setNavigationBarTitle({title: title})
    setTimeout(()=>{this.isComplete=true},300)

  },
  onShow(){
    var token = wx.getStorageSync('token');
    var room = wx.getStorageSync('room');
    if(token && room) {
      this.room=room;
      this.approvalList();
    }
    util.socketTest();
  },
  methods: {
    appMem(index,type=0) {
      var id =this.appoList[index].roomApplyId
      wx.navigateTo({url:'/pages/subMe/appMem/main?id=' + id+'&type='+type})
    },
    detailMem(index,type=0) {
      var id =this.appoList[index].roomApplyId
      wx.navigateTo({url:'/pages/subMe/detailMem/main?id=' + id+'&type='+type})
    },
    makePhone(index) {
      var phoneNumber =this.appoList[index].ownerTelephone
      wx.makePhoneCall({
        phoneNumber: phoneNumber
      })
    },
    approvalList() {
      var room = this.room
      var params={
        roomId:room.roomId,
        ownerId:room.ownerId,
        projectId:room.projectId,
      }
      util.wxRequestPro('/UserServer/owner/info/approvalList',params)
      .then((res)=>{
        console.warn('approvalList',res)
        var param=res.param;
        var userMsg=this.userMsg;
        //租客
        if(userMsg.roleId==17) {
          var awaiteFilter=param.awaiteFilter.filter((item)=>{
            return item.applyId==room.ownerId;
          })
          this.headList[0].allCount=awaiteFilter.length;
          awaiteFilter.map((value)=>{
            value['time']=util.getTime(value.applyTime);
            return value;
          })
          var approveFilter=param.approveFilter.filter((item)=>{
            return item.applyId==room.ownerId;
          })
          this.headList[1].allCount=approveFilter.length;
          approveFilter.map((value)=>{
            value['time']=util.getTime(value.applyTime);
            return value;
          })
          var refuseFilter=param.refuseFilter.filter((item)=>{
            return item.applyId==room.ownerId;
          })
          this.headList[2].allCount=refuseFilter.length;
          refuseFilter.map((value)=>{
            value['time']=util.getTime(value.applyTime);
            return value;
          })
          if(this.headIndex==0) {
            this.appoList=awaiteFilter;
          }
          if(this.headIndex==1) {
            this.appoList=approveFilter;
          }
          if(this.headIndex==2) {
            this.appoList=refuseFilter;
          }
        }
        //业主
        if(userMsg.roleId==16) {
          var awaiteFilter=param.awaiteFilter.filter((item)=>{
            return item.applyId!=room.ownerId;
          })
          this.headList[0].allCount=awaiteFilter.length;
          awaiteFilter.map((value)=>{
            value['time']=util.getTime(value.applyTime);
            return value;
          })
          var approveFilter=param.approveFilter.filter((item)=>{
            return item.applyId!=room.ownerId;
          })
          this.headList[1].allCount=approveFilter.length;
          approveFilter.map((value)=>{
            value['time']=util.getTime(value.applyTime);
            return value;
          })
          var refuseFilter=param.refuseFilter.filter((item)=>{
            return item.applyId!=room.ownerId;
          })
          this.headList[2].allCount=refuseFilter.length;
          refuseFilter.map((value)=>{
            value['time']=util.getTime(value.applyTime);
            return value;
          })
          if(this.headIndex==0) {
            this.appoList=awaiteFilter;
          }
          if(this.headIndex==1) {
            this.appoList=approveFilter;
          }
          if(this.headIndex==2) {
            this.appoList=refuseFilter;
          }
        }

      })
    },
    approvaPut(index) {
      var item =this.appoList[index]
      //result:租客撤回传0,业主：同意传1，拒绝传2.
      var params={
        roomApplyId:item.roomApplyId,
        processResult:0,
      }
      var putUrl=util.stringifyQs(params);
      util.wxRequestPro('/UserServer/owner/info/approva?'+putUrl,{},'PUT')
      .then((res)=>{
        wx.showToast({
            title: "撤回成功",
            icon: 'none'
        });
      this.approvalList();
      })
    },

    choose(e) {
      var e=e.mp
      console.warn('choose',e)
      this.date = e.detail.value
      this.formData.date = e.detail.value
    },
    selectDate(){
      console.warn("selectDate")
      wx.showToast({
        title: 'selectDate',
        icon: 'none',
        duration: 1000
      })
    },
    selectHead(index){
      this.headIndex=index;
      this.approvalList();
    },
  }
}
</script>

<style lang="stylus" scoped>
.pageContent
  height 100vh
  background $background
  padding: 110rpx 0rpx 0rpx 0rpx;
/* 头部tab切换 */
.headContent {
    position: fixed;
    width: 750rpx;
    top: 0rpx;
    left: 0rpx;
    display: flex;
    justify-content space-between
    background: #FFFFFF;
    z-index: 999;
    padding: 0rpx 30rpx 0rpx 30rpx;
    // border: 1rpx solid brown;
}
.memberType{
  display inline-block
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 6rpx;
  font-size 32rpx
  text-align center
  // border: 1rpx solid #999999;
}
.memberType.select{
  color #1086FF
  font-weight 600
}
// .memberType + .memberType{
//   margin-left 30rpx
// }
.memberType:nth-child(n+2){
  // margin-left 140rpx
}

.houseMain
  background #FFFFFF
  padding: 0rpx 14rpx 0rpx 14rpx;
  margin: 0rpx 0rpx 20rpx 0rpx;
.houseTil
  display flex
  justify-content space-between
  padding: 14rpx 14rpx 14rpx 14rpx;
  line-height: 45rpx;
  font-size: 32rpx;
  color #030303
  border-bottom: 0.3rpx solid #E7E7E7;
.houseTilTim{
  color: #666666;
}
.houseNo
  padding: 14rpx 14rpx 14rpx 14rpx;
  font-size: 30rpx;
  color #030303
  border-bottom: 0.3rpx solid #E7E7E7;
.houseMes{
  display flex
  padding: 14rpx 0rpx 14rpx 0rpx;
}
.houseMesIt{
  line-height: 36rpx;
  background: #F2F8FF;
  border-radius: 6rpx;
  border: 1px solid #BCDEFF;
  color: #519AEE;
  font-size: 24rpx;
  margin-right 10rpx;
  padding: 0rpx 14rpx 0rpx 14rpx;
}
.handler {
  display: flex;
  justify-content: flex-end;
  padding: 14rpx 14rpx 20rpx 14rpx;
  width: 100%;
  // border 1px solid aqua
}
.handlerCha{
  height: 60rpx;
  width 160rpx;
  line-height: 60rpx;
  background: #DDDDDD;
  border-radius: 30rpx;
  color: #FFFFFF;
  text-align center
  font-weight bold
  // padding: 0rpx 40rpx 0rpx 40rpx;
}
.handlerBlu{
  background: #1086FF;
  margin-left 18rpx
}
.handlerGre{
  background: #05C15F;
  margin-left 18rpx
}
.handlerRed{
  background: #FF635D;
  margin-left 18rpx
}

.btOne{
  margin: 40rpx 0rpx 0rpx 0rpx;
}

.appEmp{
  display flex
  flex-direction column
  align-items center
  height 100vh
  background #fff
  margin: -110rpx 0rpx 0rpx 0rpx;
  padding: 210rpx 0rpx 0rpx 0rpx;
}
.appEmpIcon{
  width: 670rpx;
  height: 730rpx;
  // border 1rpx solid aqua
}
.appEmpMsg{
  color: #A8AFB6;
  font-size: 36rpx;
  margin: -183rpx 0rpx 0rpx 0rpx;
}
</style>
